<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useTable, useDatePicker, useDetail } from "./utils/hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import View from "@iconify-icons/ep/view";
import searchLine from "@iconify-icons/ri/search-line";

defineOptions({
  name: "order-total"
});

const { timePeriod, shortcuts } = useDatePicker();
const {
  dataList,
  columns,
  pagination,
  loading,
  onSearch,
  openDialog,
  defaultSearch,
  handleSizeChange,
  handleCurrentChange
} = useTable(timePeriod);
const { toDetail } = useDetail();
</script>

<template>
  <div>
    <div class="main">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div class="demo-date-picker">
          <div>
            <span>时间范围</span>
          </div>
          <div class="block">
            <el-date-picker
              :v-model="timePeriod"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="截至时间"
              :shortcuts="shortcuts"
              value-format="X"
              @change="defaultSearch(timePeriod)"
            />
          </div>
        </div>
      </el-card>
      <PureTableBar title="订单详情" class="mt-0" :columns="columns">
        <!-- 表头右侧按钮 -->
        <template #buttons>
          <!-- @click="openDialog" -->
          <el-button
            type="primary"
            :icon="useRenderIcon(searchLine)"
            @click="openDialog"
          >
            订单号查询
          </el-button>
        </template>

        <template v-slot="{ size, dynamicColumns }">
          <!-- 表格区域 -->
          <pure-table
            ref="tableRef"
            adaptive
            row-key="id"
            align-whole="center"
            table-layout="auto"
            :data="dataList"
            :adaptiveConfig="{ offsetBottom: 108 }"
            :columns="dynamicColumns"
            :pagination="pagination"
            :loading="loading"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <!-- 操作按钮 -->
            <template #operation="{ row }">
              <!-- 【操作】 查看按钮 -->
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(View)"
                @click="toDetail({ id: row.orderno }, 'params')"
              >
                查看
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
